<template>
  <div class="app-container">
    <!-- 查询对话框-->
    <el-dialog :close-on-click-modal="false" :visible.sync="moreFilter" append-to-body title="更多查询" width="850px">
      <el-form ref="moreFilterForm" :inline="true" :model="queryParams" label-width="100px" size="small">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="是否回单" prop="isBack">
              <el-select v-model="queryParams.isBack" clearable filterable placeholder="请选择是否回单">
                <el-option v-for="dict in dict.type.CommIsNot" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户单号" prop="relateBill2">
              <el-input v-model="queryParams.relateBill2" clearable placeholder="请输入客户单号"
                        @keyup.enter.native="handleQuery"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收入确认状态" prop="isConfirm">
              <el-select v-model="queryParams.isConfirm" clearable filterable placeholder="请选择收入确认状态">
                <el-option v-for="dict in dict.type.ConfirmStatus" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运输性质" prop="transportPro">
              <el-select v-model="queryParams.transportPro" clearable filterable placeholder="请选择运输性质">
                <el-option v-for="dict in dict.type.TransportPro" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发网点" prop="jcOrganizationId">
              <el-select v-model="queryParams.jcOrganizationId" clearable filterable placeholder="请选择目的网点">
                <el-option v-for="dict in dict.type.DB_JC_ORG" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出发运点" prop="fromServerZoneIdDtLabel">
              <el-input v-model="queryParams.fromServerZoneIdDtLabel" clearable placeholder="请填写出发运点"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的运点" prop="toServerZoneIdDtLabel">
              <el-input v-model="queryParams.toServerZoneIdDtLabel" clearable placeholder="请填写目的运点"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际运抵日期">
              <el-date-picker v-model="queryParams.daterangeFactArriveTime" end-placeholder="结束日期" range-separator="-"
                              start-placeholder="开始日期" style="width: 240px" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际发运时间">
              <el-date-picker v-model="queryParams.daterangeFactLeaveTime" end-placeholder="结束日期" range-separator="-"
                              start-placeholder="开始日期" style="width: 240px" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求到达时间">
              <el-date-picker v-model="queryParams.daterangePlanArriveTime" end-placeholder="结束日期" range-separator="-"
                              start-placeholder="开始日期" style="width: 240px" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="要求发运时间">
              <el-date-picker v-model="queryParams.daterangePlanLeaveTime" end-placeholder="结束日期" range-separator="-"
                              start-placeholder="开始日期" style="width: 240px" type="daterange" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结算方式" prop="feeType">
              <el-select v-model="queryParams.feeType" clearable filterable placeholder="请选择结算方式">
                <el-option v-for="dict in dict.type.Clearing" :key="dict.value" :label="dict.label" :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交付方式" prop="handoverType">
              <el-select v-model="queryParams.handoverType" clearable filterable placeholder="请选择交付方式">
                <el-option v-for="dict in dict.type.HandoverType" :key="dict.value" :label="dict.label"
                           :value="dict.value"/>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleQuery">确 定</el-button>
        <el-button @click="moreFilter = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "OrderMoreQuery",
  dicts: ['ConfirmStatus', 'TransportPro', 'CommIsNot', 'DB_JC_ORG', 'Clearing', 'HandoverType'],
  props: {
    queryParams: {
      type: Object
    }
  },
  data() {
    return {
      moreFilter: false
    }
  },
  methods: {
    // 取消按钮
    moreFilterQuery() {
      this.moreFilter = true
    },
    resetQuery() {
      this.daterangeTime = [];
      this.daterangeFactArriveTime = [];
      this.daterangeFactLeaveTime = [];
      this.daterangePlanArriveTime = [];
      this.daterangePlanLeaveTime = [];
      this.resetForm("moreFilterForm");
    },
    /** 提交按钮 */
    handleQuery() {
      this.moreFilter = false
      this.$emit("ok")
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item--small.el-form-item {
  width: 362px;
}
</style>
